<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="carWashSearch" :inline="true" size="mini">
                <!-- <el-form-item label="日期：">
                    <el-date-picker
                        v-model="carWashSearch.dataTime"
                        type="daterange"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </el-form-item> -->
                <el-form-item label="车型：">
                    <el-select v-model="carWashSearch.type" clearable placeholder="请选择查询的车辆类型">
                        <el-option v-for="(item,index) in cartype" :key="index" v-show="index!==0" :label="item" :value="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn" v-if="jurisdiction.add_state === 1">
           <el-button size="medium" type="primary" @click="add()">添加</el-button>
        </div>
        <span v-else></span>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="carWashTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="车型" width="160px">
                    <template slot-scope="scope">
                        <span>{{ cartype[scope.row.type] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="金额" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.money }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="有效期" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.valiant }}天</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160px" v-if="jurisdiction.update_state === 1 || jurisdiction.delete_state === 1">
                    <template slot-scope="scope">
                        <el-button
                            v-if="jurisdiction.update_state === 1"
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            v-if="jurisdiction.delete_state === 1"
                            size="small"
                            type="danger"
                            @click="remove(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="洗车台次(SUV)" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.suv_num }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次(MPV)" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.mpv_num }}次</span>
                    </template>
                </el-table-column> -->
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>

        <div>
            <!-- 修改对话框 -->
            <el-dialog title="修改会员日优惠券" width="500px" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editPlatform" ref="editPlatform" :rules="rules">
                    <el-form-item label="车型：" :label-width="formLabelWidth" prop="type">
                        <el-select v-model="editPlatform.type" clearable placeholder="请选择优惠券使用的车型">
                            <el-option v-for="(item,index) in cartype.slice(1,cartype.length)" :key="index" :label="item" :value="index+1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="优惠券金额" :label-width="formLabelWidth" prop="money">
                        <el-input v-model="editPlatform.money" clearable placeholder="请设置优惠券的抵扣金额(元)"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠券有效期" :label-width="formLabelWidth" prop="valiant">
                        <el-input v-model="editPlatform.valiant" clearable placeholder="请设置优惠券的有效期(天)"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 添加 -->
            <el-dialog
                title="添加会员日优惠券"
                width="500px"
                :visible.sync="approvalVisible"
                center
                @close="closeAdd"
            >
                <el-form :model="addclassify" ref="addclassify" :rules="rules">
                    <el-form-item label="使用车型：" :label-width="formLabelWidth" prop="type">
                        <el-select v-model="addclassify.type" clearable placeholder="请选择优惠券使用的车型">
                            <el-option v-for="(item,index) in cartype.slice(1,cartype.length)" :key="index" :label="item" :value="index+1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="优惠券金额" :label-width="formLabelWidth" prop="money">
                        <el-input v-model="addclassify.money" clearable placeholder="请设置优惠券的抵扣金额(元)"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠券有效期" :label-width="formLabelWidth" prop="valiant">
                        <el-input v-model="addclassify.valiant" clearable placeholder="请设置优惠券的有效期(天)"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelAdd">拒 绝</el-button>
                    <el-button type="primary" @click="confirmAdd">通 过</el-button>
                </div>
            </el-dialog>
            <!-- 图片预览 -->
            <!-- <el-dialog width="600px" center :visible.sync="dialogVisible">
                <div style="text-align:center;">
                    <img width="250px" height="auto" :src="dialogImageUrl" alt />
                </div>
            </el-dialog> -->
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate} from "../../util/time.js";
import {timetamp} from "../../util/time.js";
import {timedata} from "../../util/time.js";
export default {
    data() {
        return {
            jurisdiction: null,
            activeStatus: 0, //当前活动状态：0：开启，1：结束
            // 分页
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            formLabelWidth: "120px", //对话框的label宽度
            dialogVisible: false, //放大图片的对话框显示
            editVisible: false, //修改对话框
            approvalVisible: false, //审批对话框dialogImageUrl
            cartype: ["通用","轿车","SUV","MPV"],
            carWashSearch: {
                //搜索
                // dataTime: "" //时间段
                type: ""
            },
            addclassify:{
                type: "",
                money: "",
                valiant: ""
                // number: "",
            },
            editPlatform: {
                // 修改对话框
                id:"",
                type: "",
                money: "",
                valiant: "",
                index:""
            },
            rules:{
                type:[
                    {
                        required: true,
                        message: "请输选择优惠券使用的车型",
                        trigger: "change"
                    }
                ],
                money:[
                    {
                        required: true,
                        message: "请输入优惠券的抵扣金额",
                        trigger: "blur"
                    }
                ],
                valiant:[
                    {
                        required: true,
                        message: "请输入优惠券的有效时间",
                        trigger: "blur"
                    }
                ]
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            carWashTable: [
                {
                    wash_time: "2020-08-15", //时间
                    number: "10", //注册量
                    wash_number: "10", //洗车台次
                    car_num: "5", //洗车台次(小汽车)
                    suv_num: "3", //洗车台次(SUV)
                    mpv_num: "2" //洗车台次(MPV)
                },
                {
                    wash_time: "2020-08-15", //时间
                    number: "10", //注册量
                    wash_number: "10", //洗车台次
                    car_num: "5", //洗车台次(小汽车)
                    suv_num: "3", //洗车台次(SUV)
                    mpv_num: "2" //洗车台次(MPV)
                },
                {
                    wash_time: "2020-08-15", //时间
                    number: "10", //注册量
                    wash_number: "10", //洗车台次
                    car_num: "5", //洗车台次(小汽车)
                    suv_num: "3", //洗车台次(SUV)
                    mpv_num: "2" //洗车台次(MPV)
                },
                {
                    wash_time: "2020-08-15", //时间
                    number: "10", //注册量
                    wash_number: "10", //洗车台次
                    car_num: "5", //洗车台次(小汽车)
                    suv_num: "3", //洗车台次(SUV)
                    mpv_num: "2" //洗车台次(MPV)
                }
            ]
        };
    },
    filters:{
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount}
            this.carWashSearch.type !== "" ? data.type = this.carWashSearch.type : "";
            utils.request("/memberDayCoupon/list", "post",JSON.stringify(data)).then(res => {
                console.log(res);
                this.carWashTable = res.data.data.data;
                this.pageResultSize = res.data.data.total;
                if(num === 2){
                    res.data.data.total 
                    ? this.$message({
                        message: "找到"+res.data.data.total+"条超时信息",
                        type: "success"
                    }) : this.$message("没有符合条件的数据")
                }else{return}
            });
        },
        edit(index, row) {
            // 修改
            console.log(index)
            this.editVisible = true;
            this.editPlatform.index = index;
            console.log(this.editPlatform.index)
            this.editPlatform.id = row.id;
            this.editPlatform.type = row.type;
            this.editPlatform.money = row.money;
            this.editPlatform.valiant = row.valiant;
        },
        confirmEdit() {
            // 确认修改对话框
            this.$refs["editPlatform"].validate((valid)=>{
                if(valid){
                    console.log("123")
                    let that = this;
                    let data = {}
                    for(var i in this.editPlatform) i !== "index" && this.editPlatform[i] !== "" ? data[i] = this.editPlatform[i] : "";
                    utils.request("/memberDayCoupon/update","post",JSON.stringify(data)).then(resp=>{
                        console.log(resp)
                        if(resp.data.code === 200){
                            let key = that.editPlatform.index;
                            data.money = data.money.substring(data.money.length-3) !== ".00" ? data.money+".00" : data.money;
                            that.carWashTable.splice(key,1,data);
                            that.editVisible = false;
                            that.editPlatform[i] = "";
                            that.approvalVisible = false;
                            that.$message({
                                message: "修改成功！",
                                type:"success "
                            })
                        }else{return}
                    })
                }else{return}
            })
        },
        cancelEdit() {
            // 取消修改对话框
            this.editVisible = false;
            for(var i in this.editPlatform)this.editPlatform[i] = "";
        },
        closeEdit() {
            // 关闭修改对话框
            this.editVisible = false;
            for(var i in this.editPlatform)this.editPlatform[i] = "";
        },
        remove(index, row) {
            // 删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                utils.request("/memberDayCoupon/delete","post",JSON.stringify({id:row.id})).then(resp=>{
                    // console.log(resp,data)
                    if(resp.data.code === 200){
                        this.carWashTable.splice(index,1)
                        this.$message({
                            message: "删除成功！",
                            type:"success "
                        })
                    }else{return}
                })
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        // approval(index, row) {
        //     // 审批
        //     console.log(index, row);
        //     this.approvalVisible = true;
        //     for(var i in this.addclassify) this.addclassify[i] = row[i];
        //     this.addclassify.index = index;
        //     // this.addclassify.name = row.name;
        //     // this.addclassify.image_url = row.image_url;
        //     // this.addclassify.end_time = row.end_time;
        //     // this.addclassify.platform = row.platform;
        // },
        add(){
            this.approvalVisible = true;
        },
        confirmAdd() {
            // 添加
            this.$refs["addclassify"].validate((valid)=>{
                if(valid){
                    let data = {
                        type: this.addclassify.type,
                        money: this.addclassify.money,
                        valiant: this.addclassify.valiant
                    }
                    utils.request("/memberDayCoupon/add","post",JSON.stringify(data)).then(resp=>{
                        console.log(resp,data)
                        if(resp.data.code === 200){
                            data.id = resp.data.data;
                            data.money = data.money.substring(data.money.length-3) !== ".00" ? data.money+".00" : data.money;
                            this.carWashTable.length < this.currentCount ? this.carWashTable.push(data) : "";
                            this.addclassify.type = "";
                            this.addclassify.money = "";
                            this.addclassify.valiant = "";
                            this.approvalVisible = false;
                            this.$message({
                                message: "添加成功！",
                                type:"success "
                            })
                        }else{return}
                    })
                }else{return}
            })
        },
        cancelAdd() {
            // 拒绝审批对话框
            this.addclassify.type = "";
            this.addclassify.money = "";
            this.addclassify.valiant = "";
            this.approvalVisible = false;
        },
        closeAdd() {
            // 关闭审批对话框
            this.approvalVisible = false;
            this.addclassify.type = "";
            this.addclassify.money = "";
            this.addclassify.valiant = "";
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
            this.selectTable = val;
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1)
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
        }
    },
    mounted() {},
    created() {
        // 一元洗车活动的状态
        // utils.request("/oneMoneyState/list","post",JSON.stringify({page:1,list_rows:10})).then(resp=>{
        //     // console.log(resp)
        //     this.activeStatus = resp.data.data.data[0].state;
        // })
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        this.searchClick(1)
        // 一元洗车活动总表
        // let data = {page:this.currentPage,list_rows:this.currentCount}
        // utils.request("/oneMoneyRecord/list", "post",JSON.stringify(data)).then(res => {
        //     // console.log(res);
        //     this.carWashTable = res.data.data.data;
        // });
    }
};
</script>

